<!DOCTYPE html>

<html>
   <head>
      <meta charset='utf-8'>
      <title>crater</title>

      <!-- css stylesheets -->
      <link rel='stylesheet' href='lib/css/pure.css'>
      <link rel='stylesheet' href='lib/css/font-awesome.css'>
      <link rel='stylesheet' href='lib/codemirror-4.3/lib/codemirror.css'>
      <link rel='stylesheet' href='lib/css/ubuntu.css'>
      <link rel='stylesheet' href='lib/css/ubuntu-mono.css'>
      <link rel='stylesheet' href='index.css'>

      <!-- js scripts -->
      <script src='lib/js/mustache.js'></script>
      <script src='lib/codemirror-4.3/lib/codemirror.js'></script>
      <script src='lib/codemirror-4.3/mode/javascript/javascript.js'></script>
      <script src='lib/codemirror-4.3/mode/htmlmixed/htmlmixed.js'></script>
      <script src='lib/codemirror-4.3/mode/css/css.js'></script>
      <script src='lib/codemirror-4.3/mode/xml/xml.js'></script>
      <script src='index.js'></script>
      <script src='main.dart' type='application/dart'></script>
    
   </head>
   <body>
      
      <!-- main area -->
      <div class='pure-g' id='main-area'>
         <div class='pure-u-1-4 mine-full-height' id='navigator'>
   
            <!-- buttons to manipulate editor -->
            <div class='mine-centered mine-padded' id='buttons'>
               <a class='pure-button mine-button' href='#' id='new'>New</a>
               <a class='pure-button mine-button' href='#' id='save'>Save</a>
               <a class='pure-button mine-button' href='#' id-'discard'>Discard</a>
               <a class='pure-button mine-button' href='#' id='delete'>Delete</a>
            </div>
   
            <!-- name of current directory -->
            <div class='mine-padded' id='location'>
               <span class='mine-horizontal-flow' id='path'><i class='fa fa-arrow-left mine-hover' id='back-button'></i> </span>
            </div>
   
            <!-- things inside current directory -->
            <div class='mine-scrollable mine-padded' id='listing'>
               <ul class='fa-ul list' id='directories'></ul>
               <ul class='fa-ul list' id='files'></ul>
            </div>
   
         </div>
      
         <!-- this is where the editor lives -->
         <div class='pure-u-3-4 mine-full-height' id='editor'>
         </div>

      </div>

      <!-- status bar -->
      <div class='pure-g' id='status-bar'>
         <div class='pure-u-1-4 mine-full-height mine-relative'>
            <span class='mine-middle' style='left:2px'>No errors found!</span>
         </div>
         <div class='pure-u-3-4 mine-full-height mine-relative'>
            <span class='mine-middle' id='file' style='left:2px'></span>
            <span class='mine-middle' id='position' style='right:2px'></span>
         </div>
      </div>

      <!-- templates -->
      <script type='text/template' id='directory-template'>
         {{#directories}}
         <li class='entry directory mine-hover mine-horizontal-flow'><i class='fa fa-li fa-folder'></i> {{.}}</li>
         {{/directories}}
      </script>
      <script type='text/template' id='file-template'>
         {{#files}}
         <li class='entry file mine-hover mine-horizontal-flow'><i class='fa fa-li fa-file'></i> {{.}}</li>
         {{/files}}
      </script>
      <script type='text/template' id='position-template'>
      	line: {{line}}, ch: {{ch}}
      </script>
   
   </body>
</html>
